var provincesSel = document.getElementById("provinces");
//获取直辖市、地级市的下拉框
var citiesSel = document.getElementById("cities");
//获取区、县的下拉框
var countiesSel = document.getElementById("counties");
// 默认设置为请选择选项
provincesSel.innerHTML = "<option>-请选择-</option>";
citiesSel.innerHTML = "<option>-请选择-</option>";
countiesSel.innerHTML = "<option>-请选择-</option>";

// 循环遍历城市列表
for (var i = 0; i < cityData.length; i++) {
    // 将城市列表中的每个元素的text和value作为参数，生成新的option项
    var opt = new Option(cityData[i].text, cityData[i].value);
    // 将新生成的option加入到直辖市、省的下拉框中
    provincesSel.appendChild(opt);
}
// 为直辖市、省的下拉框加入onchange事件
provincesSel.onchange = function() {
    // 每次改变身份选项后，地级市级和县级下拉框内容清空，设置为“请选择”
    citiesSel.innerHTML = "<option>-请选择-</option>";
    countiesSel.innerHTML = "<option>-请选择-</option>";
    // 获取当前被选中的option的下标，-1是为了清除加了“请选择”带来的影响
    var a = this.selectedIndex - 1;
    // 循环遍历城市列表
    for (var j = 0; j < cityData[a].children.length; j++) {
        // 将城市列表中的第a个元素的每个children的text和value作为参数，生成新的option项
        var opt = new Option(cityData[a].children[j].text, cityData[a].children[j].value);
        // 将新生成的option加入到地级市的下拉框中
        citiesSel.appendChild(opt);
    }

    // 为地级市的下拉框加入onchange事件
    citiesSel.onchange = function() {
        // 每次改变身份选项后，县级下拉框内容清空，设置为“请选择”
        countiesSel.innerHTML = "<option>-请选择-</option>";
        // 获取当前被选中的option的下标，-1是为了清除加了“请选择”带来的影响
        var b = this.selectedIndex - 1;
        // 循环遍历城市列表
        for (var k = 0; k < cityData[a].children[b].children.length; k++) {
            // 将城市列表中的第a个元素的第b个children的children的text和value作为参数，生成新的option项
            var opt = new Option(cityData[a].children[b].children[k].text, cityData[a].children[b].children[k].value);
            // 将新生成的option加入到县级的下拉框中
            countiesSel.appendChild(opt);
        }
    }
}